<template>
	<view>
		<!-- 海报轮播图 -->
		<swiper class="poster-swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
			<swiper-item v-for="(poster, index) in posterList" :key="index">
				<image :src="poster" class="poster-image" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
	</view>
	<van-notice-bar left-icon="volume-o" text="盲盒里的世界，潮玩中的无限可能！ 
	潮玩盲盒，让每一次拆盒都充满期待！
	潮玩盲盒，玩出你的独特风格！" />
	<view class="page">
		<WaterfallsFlow :wfList="list" @itemTap="itemTap" />
	</view>
	
	<!-- 回到顶部按钮 -->
	<view class="back-to-top" :class="{ 'show': true }" @click="scrollToTop">
		<view class="back-to-top-icon">
			<van-icon name="arrow-up" size="24px" color="#fff" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
	} from 'vue';
	import {
		onReachBottom,
		onPullDownRefresh,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		getProductData
	} from '../../api/homePage.js'
	// 海报图片列表
	const posterList = ref([
		'https://ts1.cn.mm.bing.net/th?id=OIP-C.ixuXUyVmUX0vvAbcnXM-AQHaD9&w=341&h=182&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
		'https://tse4-mm.cn.bing.net/th/id/OIP-C.o1RSDI8w1PKRiMMKtOxibwHaEK?w=303&h=180&c=7&r=0&o=5&pid=1.7',
		'https://tse1-mm.cn.bing.net/th/id/OIP-C.ro_dooOL283p2KJN0Nvc8gHaDt?w=331&h=175&c=7&r=0&o=5&pid=1.7'
	]);

	// 定义响应式数据
	const list = ref([]);
	const requiredData = ref([{
			image: '../../static/主板/主板1.jpg',
			price: 248,
			nickName: '主板1'
		},
		{
			image: '../../static/显卡/显卡3.jpg',
			price: 4522,
			nickName: '显卡3'
		},
		{
			image: '../../static/主板/主板2.jpg',
			price: 234,
			nickName: '主板2'
		},
		{
			image: '../../static/显卡/显卡4.jpg',
			price: 4323,
			nickName: '显卡4'
		},
		{
			image: '../../static/显卡/显卡5.jpg',
			price: 4234,
			nickName: '显卡5'
		},
		{
			image: '../../static/主板/主板3.jpg',
			price: 127,
			nickName: '主板3'
		},
		{
			image: '../../static/玩偶/玩偶2.jpg',
			price: 23,
			nickName: '玩偶2'
		},
		{
			image: '../../static/玩偶/玩偶1.jpg',
			price: 42,
			nickName: '玩偶1'
		},
		{
			image: '../../static/玩偶/玩偶3.jpg',
			price: 123,
			nickName: '玩偶3'
		},
		{
			image: '../../static/手机/手机5.jpg',
			price: 2432,
			nickName: '手机5'
		},
		{
			image: '../../static/手机/手机1.jpg',
			price: 7334,
			nickName: '手机1'
		}
	]);
	// 控制回到顶部按钮显示
	const showBackToTop = ref(false);
	
	// 监听页面滚动
	onPageScroll(({ scrollTop }) => {
		showBackToTop.value = scrollTop > 300;
	});

	onMounted(() => {
		setTimeout(() => {
			getRequiredData()
		}, 500);
	});

	// 模拟触底刷新
	onReachBottom(() => {
		setTimeout(() => {
			const newData = requiredData.value.slice(0, 50);
			list.value = [...list.value, ...newData];
			// console.log('list.data',list.value);
			console.log('newData',newData);
		}, 500);
	});

	// 模拟上拉刷新
	onPullDownRefresh(() => {
		setTimeout(() => {
			const newList = [...requiredData.value].reverse();
			list.value = newList;
			uni.stopPullDownRefresh();
		}, 500);
	});
	// 获取商品信息
	const getRequiredData = () => {
		getProductData().then(res => {
			// 将res.data赋值给requiredData
			requiredData.value = [...res.data.rows];
			list.value = [...res.data.rows];
			console.log('list.data',list.value);
		})
	}
	// item 点击事件处理函数
	const itemTap = (item) => {
		
	};
	
	// 回到顶部方法
	const scrollToTop = () => {
		// 检查用户登录状态
		uni.getStorage({
			key: 'userstatus',
			success: function(res) {
				if (res.data) {
					// 用户已登录，执行回到顶部
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				} else {
					// 用户未登录，提示登录
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					});
					// 延迟跳转到登录页面
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 1500);
				}
			},
			fail: function(err) {
				// 获取状态失败，提示登录
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					duration: 2000
				});
				// 延迟跳转到登录页面
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}, 1500);
			}
		});
	};
</script>

<style lang="scss" scoped>
	/* 设置轮播图容器的宽度和高度 */
	.poster-swiper {
		width: 100%;
		height: 400rpx;
		/* 这里可以根据需要调整轮播图的高度 */
	}

	/* 设置图片的宽度和高度 */
	.poster-image {
		width: 100%;
		height: 100%;
		border-radius: 2++0rpx;
	}

	.page {
		min-height: 100vh;
		background: #eee;
	}
	
	.back-to-top {
		position: fixed;
		right: 40rpx;
		bottom: 100rpx;
		z-index: 999;
		opacity: 0;
		transform: translateY(100rpx);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
		
		&.show {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}
		
		.back-to-top-icon {
			width: 80rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #1989fa, #39b9fa);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4rpx 20rpx rgba(25, 137, 250, 0.3);
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
				box-shadow: 0 2rpx 10rpx rgba(25, 137, 250, 0.2);
			}
			
			&::before {
				content: '';
				position: absolute;
				top: -4rpx;
				left: -4rpx;
				right: -4rpx;
				bottom: -4rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, rgba(25, 137, 250, 0.2), rgba(57, 185, 250, 0.2));
				z-index: -1;
				animation: pulse 2s infinite;
			}
		}
	}
	
	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 0.8;
		}
		50% {
			transform: scale(1.2);
			opacity: 0.4;
		}
		100% {
			transform: scale(1);
			opacity: 0.8;
		}
	}
</style>